<template>
  <div class="posre borderbox wrapper h100p pt204">
    <div class="product_bg posab w100p top0 zindex-1">
      <img src="http://one-stand.oss-cn-shanghai.aliyuncs.com/product-index/20190418160834.png" alt=" " class="w100p h214">
    </div>
    <div  class = "mt-18">
      <!--title begin-->

      <div class="fs18 cfff disflex pl15 pr16">
        <img :src="company_msg.company_logo || 'https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/card1_user.png'"
             alt="" class="w60 h60 bradius5 mr10 bgfff">
        <div class="">
          <b class="pb10 fbold over_1 w274">{{company_msg.company_name}}</b>
          <div class="disflex jsbet">
            <div class="disflex align-cen bgblue fs10 bradius5 w65 jscen lh20 ">

              <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/check_mini.png" alt="" class="w10 h10 mr5">
              <span>认证企业</span>

            </div>

            <div class="disflex align-cen">

              <button class='w24 pr10 bgfff contentbox textr disflex align-cen ' open-type="share" hover-class="other-button-hover">
                <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/share.png" alt="" class="w15 h15 mr7">
              </button>
              <img src="http://one-stand.oss-cn-shanghai.aliyuncs.com/product-index/20190418161144.png"
                   alt="" class="w20 h20" @click="collect"
                   v-if="isCollect">
              <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/star.png"
                   alt="" class="w20 h20 posre" @click="collect"
                   v-if="!isCollect">

            </div>


          </div>
        </div>

      </div>

      <!--title end-->

      <!--lists begin-->
      <div :class="nav_top ? 'nav_top' : ''">
        <div class="bgfff h70" v-if="nav_top"></div>
        <div class="posre pl15 pr42 bgfff">
          <scroll-view scroll-x class="nav" scroll-with-animation>
            <div class="">
              <div class="nav-item"
                  v-for="(navItem,idx) in menu" :key="idx"
                  :class="menu_id == navItem.goodstypeId ?'active':''"
                  @click="menu_tap(navItem.goodstypeId)">{{navItem.name}}
              </div>
            </div>
          </scroll-view>
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/search.png" alt="" @click="toSearchGoods" class="w20 h20 menu_more posab">
        </div>
      </div>

      <div class="disflex jsbet bgf5f6 pl15 pr16 wrap pb23" v-if="prod_lists.length">
        <getPhoneNumberGoods v-for="(v,k) in prod_lists"
                             :key="k"
                             @next="toProdDetail"
                             :goodInfo="v">
<!--          <div class="prod_item bradius10 w168 h270 mt10 bgfff">-->
<!--            <img :lazy-load="true" :src="v.prodLogo" mode="aspectFill" alt="" class="w100p h168">-->
<!--            <p class="fs14 c38 over_2 pl16 pr22 pt10 mb10">{{v.goodsName}}</p>-->
<!--            <p class="fs12 pl16">-->
<!--              <span class="corange pr7"><b class="disinblock">￥ </b><b class="fs20 fbold disinblock">{{v.price}}</b></span>-->
<!--              &lt;!&ndash;<span class="ca8 line-through">￥198</span>&ndash;&gt;-->
<!--            </p>-->
<!--          </div>-->
        </getPhoneNumberGoods>

      </div>
      <div v-else>
        <NoData>暂无商品</NoData>
      </div>
      <!--lists end-->

    </div>

    <!--右边悬浮框-->
    <!--    <div class="posfix right11 add_white bottom10 w40 h40 bg_line_blue bradius50p textc lh40" @click="right_float_show = !right_float_show">-->

    <!--    </div>-->

    <!--bottom-->
    <div class="textc lh42 fs12 ca8 bgf5f6" v-if="nodata && prod_lists.length">- 到底了，看看其他的吧 -</div>

    <div class="index_float_right trans2 overhidden">
      <RightFloat></RightFloat>
    </div>
  </div>
</template>

<script>
  import RightFloat from '@/components/rightFloat' // 订单项
  import getPhoneNumberGoods from '@/components/getPhoneNumberGoods' //
  import WXAJAX from '../../utils/request'
  import NoData from '@/components/noData'

  export default {
    name: '',
    components: {RightFloat, NoData, getPhoneNumberGoods},
    data() {
      return {
        canClickStar: true, // 是否可以点击star按钮
        menu: [ {name:'全部',goodstypeId: '-10'} ],
        menu_id: '-10',
        prod_lists:[],
        nodata:false ,//是否已经没有数据
        COMPANYID : 0 ,
        company_msg:{
          admin_logo:'',
          company_logo:'',
          company_name:''
        },
        currentPage:1,
        isCollect : false ,//是否收藏
        collectionId:0,
        page:1,
        isLoading : false ,//是否在加载
        right_float_show:false ,//右边悬浮框
        nav_top: false
      }
    },
    onShow() {
      //获取当前的公司
      let lastCompanyid = this.COMPANYID;
      this.COMPANYID = wx.getStorageSync('COMPANYID') || 0 ;
      //this.getProds();

      if (lastCompanyid != this.COMPANYID || !this.COMPANYID) {
        this.prod_lists = [] ;
        this.page = 1;
        this.getcompany();
        this.menu_tap('-10');
      }
      //this.getMeuns();
    },
    mounted(){
    },
    onShareAppMessage(e) {
      let COMPANYID = wx.getStorageSync('COMPANYID') || 0;
      let CARDID = wx.getStorageSync('CARDID') || 0;

      this.addGoodsForwardRecord(CARDID);
      return {
        path: '/pages/Product/main?cardId=' + CARDID + '&companyId=' + COMPANYID + '&goType=1',
        success(e) {
          wx.showShareMenu({
            withShareTicket: true
          })
        },
        fail(e) {
          console.log('失败分享名片--- ', e);
        }
      }
    },
    onPageScroll(e){
      console.log(e.scrollTop)
      if (e.scrollTop > 200) {
        wx.setNavigationBarColor({
          frontColor: '#000000',
          backgroundColor: '#ff0000',
          animation: {
            duration: 400,
            timingFunc: 'easeIn'
          }
        })
        this.nav_top = true;
      } else {
        this.nav_top = false;
        wx.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: '#ffffff',
          animation: {
            duration: 400,
            timingFunc: 'easeIn'
          }
        })
      }
      this.right_float_show = false ;
    },
    async onPullDownRefresh() {
      // to doing..
      // 停止下拉刷新
      wx.showNavigationBarLoading();
      this.page = 1 ;
      this.prod_lists = [] ;
      this.nodata = false ;
      this.isLoading = false ;
      //this.getProds();
      //this.getMeuns();
      this.getcompany();
      this.menu_tap(this.menu_id || '-10');
      wx.showLoading();
      wx.stopPullDownRefresh();
      setTimeout(function () {
        wx.hideLoading();
        wx.hideNavigationBarLoading();
      },300)
    },
    methods: {
      toSearchGoods() {
        console.log('toSearchGoods')
        wx.navigateTo({url:'../searchGoods/main?companyId=' + this.COMPANYID});
      },
      getcompany(){//获取公司信息
        let v = this ;
        WXAJAX.POST({
          companyId  : v.COMPANYID,
        }, '', '/goods/getCompanyInfo').then((data, code) => {
          if(data){
            v.company_msg = {
              admin_logo:data.userLogo || '',
              company_logo:data.companyLogo || '',
              company_name:data.companyName || '',
            }
            v.company_msg = {
              company_logo: data.companyLogo,
              company_name: data.companyName,
            }
            v.isCollect = data.isCollection == 1;
            if(data.goodstypeModelList){
              // v.menu_id = data.goodstypeModelList[0].goodstypeId ;
              v.menu = [{name:'全部',goodstypeId: -10},...data.goodstypeModelList] ;
              //获取分类下的产品
            }else{
              v.menu_id = '';
              v.menu = '';
              v.prod_lists = [] ;
            }
          } else if (code != 209){
            v.company_msg = {
              admin_logo: '',
              company_logo: '',
              company_name: '',
            }
          }
        }).catch((err) => {
          this.company_msg = {};
        })
      },
      getMeuns(){//获取所有的分类
        let v = this ;
        wx.showLoading();
        WXAJAX.POST({
          companyId : v.COMPANYID,
        }, '', '/goods/getGoodsType').then((data, code) => {
          // wx.hideLoading();
          if(data){
            v.company_msg = {
              company_logo: data[0].companyLogo,
              company_name: data[0].companyName,
            }
            v.menu_id = data[0].goodstypeId ;
            v.menu = data ;
            v.isCollect = data[0].isCollection == 1;
            //获取分类下的产品
            v.menu_tap(v.menu_id);
          }else{
            if (code != 209) {
              v.menu = [] ;
            }
          }
          wx.hideLoading();
        }).catch((err) => {
          wx.hideLoading();
          v.menu = [];
        })
      },
      checkCollect(){//
        WXAJAX.checkCollect({
          itemType : 3 ,
          itemId : this.COMPANYID ,
        }).then((data)=>{
          this.isCollect = data.status ;
          this.collectionId = data.collectionId || 0 ;
        }).catch((err)=>{

        })
      },
      getProds(){//获取产品
        let v = this ;
        if(v.isLoading){
          wx.hideLoading();
          return;
        }
        v.isLoading = true ;
        WXAJAX.POST({
          goodstypeId : v.menu_id,
          pageNum: v.page ,
          companyId: wx.getStorageSync('COMPANYID'),
          cardId: wx.getStorageSync('CARDID'),
        }, '', '/goods/getGoodsList').then((data) => {
          wx.hideLoading();
          if(data){
            data.forEach(function (i,k) {
              if(i.goodPhoto){
                i.prodLogo = i.goodPhoto.split(',')[0];
              }else{
                i.prodLogo = '' ;
              }
              if(i.price){
                i.price /= 100 ;
                i.price = i.price.toFixed(2);
              }else{
                i.price = '' ;
              }
            });
            v.prod_lists = [...v.prod_lists , ...data] ;
            v.page ++ ;
            setTimeout(function () {
              v.isLoading = false ;
            },500);
          }else{
            // v.prod_lists = [] ;
            setTimeout(function () {
              v.nodata = true ;
              v.isLoading = false ;
            },500);
          }
        }).catch((err) => {
          console.log(err);
          v.prod_lists = [];
          wx.hideLoading();
          if(err.code == 204){
            v.nodata = true ;
          }
          setTimeout(function () {
            v.isLoading = false ;
          },500);
        })
      },
      menu_tap(id) {
        this.menu_id = id || '';
        this.page = 1 ;
        this.nodata = false ;
        this.isLoading = false ;
        this.prod_lists = [] ;
        wx.showLoading() ;
        this.getProds() ;
      },
      toProdDetail(id){//进入详情
        let prod = this.prod_lists.filter(prod => {return prod.goodsId === id})[0]
        wx.setStorageSync('prod', prod)
        wx.navigateTo({url:'../prodDetail/main?goodId='+id});
      },
      collect(){//收藏企业
        if (this.canClickStar){
          this.canClickStar = false
          let _url = '' ,
            _request = {} ;
          if(this.isCollect){//取消收藏
            _url = '/personal/delCollection' ;
            _request = {
              itemType : 3 ,
              itemId : this.COMPANYID ,
            }
          }else{//添加收藏
            _url = '/personal/addCollection' ;
            _request = {
              itemType : 3 ,
              itemId : this.COMPANYID ,
            }
          }
          WXAJAX.changeCollect(_request , _url ).then((data)=>{
            console.log(data);
            if(data){
              this.isCollect = !this.isCollect ;
              wx.showToast({ // 这玩意要不要，跟产品协商一下，感觉体验不好
                title: this.isCollect ? '收藏成功！' : '取消收藏！',
                icon: 'none',
                duration: 2000
              });
            }
            setTimeout(()=>{ // 防止用户多次点击，具体时间咨询产品
              this.canClickStar = true
            }, 200)
          }).catch((err)=>{
            setTimeout(()=>{
              this.canClickStar = true
            }, 200)
          });
        }
      }
    },
    onReachBottom() {
      wx.showLoading({
        title : '加载中...',
      });
      let v = this ;
      v.getProds();
    },
  }
</script>

<style>
  .product_bg {
    height: 295px;
    background: #fff;
  }

  .menu_more {
    right: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .nav {
    height: 45px;
    width: 100%;
    line-height: 44px;
    font-size: 14px;
    white-space: nowrap;
    /* position: sticky;
    top: 0; */
    /*   position: fixed;
       top: 0;
       left: 0;
       z-index: 99;*/
  }
  .nav_top{
    position: sticky;
    top: 0;
  }
  .nav-item {
    /*width: 20%;*/
    display: inline-block;
    text-align: center;
    margin-right: 24px;
  }

  .nav-item.active {
    border-bottom: 2px solid #51CDCB;
    color: #51CDCB;
    font-weight: bold;
  }

  .prod_float_right>div{
    bottom: 60px;
  }
</style>





























